<template>
  <div class="acc-div">
    <div class="menu">
      <div class="menu-and-button-wrapper">
        <el-menu :default-active="activeNav" class="el-menu-demo" mode="horizontal"
                 background-color="rgb(251,219,68)" @select="handleNav">
          <el-menu-item index="z">支出</el-menu-item>
          <el-menu-item index="s">收入</el-menu-item>
        </el-menu>
        <el-button  class="cancel-button" type="text" @click="cancel">取消</el-button>
      </div>
    </div>
    <div class="content" >
      <div class="item-container">
        <div v-for='(item, index) of itemList' :key="item.id" @click="changeItem(item, index)" class="item">
          <div class="icon-div">
            <img class="my-icon" :src="bindIcon(item.picture)"
                 :style="{ backgroundColor: item === activeItem ? 'rgb(251, 219, 68)' : 'rgb(235, 235, 235)' }"/>
          </div>
          <div>
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import accountApi from "@/api/accountApi";
import router from "@/router";

export default {
  name: 'accountView',
  data() {
    return {
      alterIconItem: {},
      isShowKeyBoard: {},
      activeItemIndex: -1, // 活跃项的索引
      activeItem: -1,
      activeNav: "z",
      exit: true,
      itemList: [{
        id: "",
        name: "",
        picture: "",
        remark: ""
      }],
      MIN_ITEMS_THRESHOLD: 36,
    };
  },
  created() {
    this.handleNav(this.activeNav);
  },
  watch: {
    exit(value) {
      if (value) {
        $('.content').css("padding-bottom", "70px");
      }
    }
  },
  methods: {
    cancel() {
      this.$parent.cancelAccount()
    },
    handleNav(key) {
      const param = {
        type: key
      };
      accountApi.getBudgetType(param).then((res) => {
        if (res.data.code == 200) {
          this.itemList = res.data.data;
          for (let i = 0; i < this.itemList.length; i++) {
            this.itemList[i].picture = this.itemList[i].picture + ".png";
          }
        }
      }).catch((error) => {
        this.$message({
          message: '页面加载失败',
          type: 'error'
        });
      });
    },
    bindIcon(icon) {
      if (icon) {
        return require("@/assets/icons/budgettype1/" + icon);
      }
    },
    changeItem(item, index) {
      if (this.$parent.accountViewType === 'alterIcon') {
        this.alterIcon(item)
        return;
      }
      if (item.typeId === "z133") {
        router.push({
          name:'typeSet',
          params: { type: "income" }
        });
      } else if (item.typeId === "s205") {
        router.push({
          name:'typeSet',
          params: { type: "spending" }
        });
      } else {
        this.activeItem = item; // 将点击的项赋值给 activeItem
        this.activeItemIndex = index; // 更新活跃项的索引
        this.isShowKeyBoard = item;
        this.$emit('isShowKeyBoard', item); // 发送数据给父组件
        $('.content').css("padding-bottom", "270px");
        this.exit = false;
      }

    },
    alterIcon(item) {
      var budget = {
        budgetId: this.alterIconItem.budgetId,
        typeId: item.typeId
      }
      accountApi.updateBudgetJbxx(budget).then((res) => {
        if (res.data.code == 200) {
          this.cancel()
        }
      })
    }
  }
};
</script>

<style scoped>

.acc-div {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  top: 0;
}

.menu {
  width: 100%;
  background-color: rgb(251, 219, 68);
  height: 70px;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  text-align: center;
  position: fixed;
  display: flex;
  justify-content: center; /* 居中子元素 */
  align-items: center; /* 垂直居中（如果需要的话） */
}

.item.active {
  background-color: rgb(251, 219, 68); /* 点击时的背景颜色 */
}

.item-container {
  display: flex;
  flex-wrap: wrap; /* 允许项目在容器中换行 */
  //justify-content: space-around; /* 均匀分布项目 */
  justify-content: flex-start; /* 从左到右排列 */
  align-items: center; /* 垂直居中对齐项目 */
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
}

.my-icon {
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 50%;
}

.menu-and-button-wrapper {
  width: 100%;
  display: flex;
  align-items: center; /* 垂直居中（如果需要的话） */
  .el-menu-demo {
    background-color: rgb(251, 219, 68);
    width: 140px;

    margin-left: 120px;
    .el-menu--horizontal el-menu{
      margin-left:33%
    }
  }

  .cancel-button {
    /* 如果有需要，可以在这里添加更多样式来定制按钮的外观 */
    color:black;
    width: 50px;
    margin-left: 80px;
    align-content: center;
  }
}

.content {
  flex: 1;
  overflow-y: auto;
  padding-top: 80px; /* 留出头部的高度 */
  padding-bottom: 70px;
}
</style>
